<template>
  <div class="movie_detail">
    <header class="movie_bg">
      <div class="movie_goods_img fl">
        <img
          :src="movieObj.poster ? `https://gw.alicdn.com/${movieObj.poster}` : 'https://gw.alicdn.com/tps/i1/TB147JCLFXXXXc1XVXXxGsw1VXX-112-168.png'"
          alt
        />
      </div>
      <div class="movie_goods_cnt">
        <div>
          <h4>{{movieObj.showName}}</h4>
        </div>
        <p>{{movieObj.showNameEn}}</p>
        <p>
          <span>{{movieObj.type}}</span>
        </p>
        <p>
          <span>{{movieObj.country}}</span>
          <span>|</span>
          <span>{{movieObj.duration}}分钟</span>
        </p>
        <p>
          <span>{{movieObj.openTime}}在中国上映</span>
        </p>
        <div class="movie_star">
          <span class="star">
            <img src="../assets/images/star.svg" alt />
          </span>
          <span class="star_remark">{{movieObj.remark}}分</span>
        </div>
      </div>
    </header>
    <div v-if="infoObj">
      <div class="introduction">
        <p>{{infoObj.description}}</p>
        <p @click='controlShowMany'>
          <span v-if="hideSomething">展开</span>
          <span v-else>收起</span>
        </p>
      </div>

      <div class="movie_actor">
        <div>
          <h4>演职人员</h4>
        </div>
        <div class="swiper-container">
          <div class="swiper-wrapper" v-if="infoObj.artistes">
            <div class="swiper-slide" v-for="item in infoObj.artistes.actor" :key="item.id">
              <div class="swiper_img">
                <img :src="`https://gw.alicdn.com/${item.avatar}`" alt />
              </div>
              <div>
                <p>{{item.artisteName}}</p>
                <p>
                  <span>{{item.profession}}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="movie_actor">
        <div>
          <h4>剧照</h4>
        </div>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in infoObj.trailer" :key="item.id">
              <div class="still_photos">
                <img :src="`https://gw.alicdn.com/${item}`" alt />
              </div>
            </div>
          </div>
        </div>
      </div>
      <hotEvaluation :evalLists='evalLists'></hotEvaluation>
    </div>
    <div v-else class="no-data">
			<span>暂时没有更多数据～</span>
		</div>
  </div>
</template>

<script>
import Swiper from "swiper";
import hotEvaluation from '../components/MovieDetail/hotEvaluation'
export default {
  props:['id'],
  data() {
    return {
      hideSomething: true,
      movieObj: {},
      infoObj: false,
      evalLists: []
    };
  },
  methods: {
    controlShowMany(){
      this.hideSomething=!this.hideSomething
    },
    getDataById(lists, id) {
      for (let i = 0; i < lists.length; i++) {
        if (lists[i].mId == id) {
          return lists[i];
        }
      }
      return false;
    },
    initSwiper() {
      this.$nextTick(() => {
        var swiper = new Swiper(".swiper-container", {
          pagination: ".swiper-pagination",
          slidesPerView: 4,
          centeredSlides: false,
          spaceBetween: 5
        });
      });
    }
  },
  created() {
    let id = this.$route.params.id;
    let hotLists = this.$store.state.data;
    let comingLists = this.$store.state.lists;
    if (comingLists.length) {
      this.movieObj = this.getDataById(comingLists, id);
    } else if (!comingLists.length && !hotLists.length) {
      this.$router.push("/");
    } else {
      this.movieObj = this.getDataById(hotLists, id);
    }
    let detailStr = this.movieObj.detailStr;
    if (detailStr) {
      this.$axios.get(`/movie/info/?name=${detailStr}`).then(res => {
        // console.log(res);
        this.infoObj = res.data.data.data.returnValue;
        this.initSwiper();
      });
      this.$axios.get(`/movie/evaluation/?name=${detailStr}`).then(res => {
        // console.log(res.data.data);
        this.evalLists = res.data.data.data.returnValue;
      });
    } else {
      this.infoObj = false;
    }
    this.initSwiper();
  },
  components:{
    hotEvaluation
  },
};
</script>

<style>
.movie_bg {
  background-color: #4083b0;
  padding-left: 15px;
  height: 50vmin;
  padding-top: 15px;
  box-sizing: border-box;
  color: #fff;
}
.movie_detail {
  padding-bottom: 50px;
  background-color: #fff;
}
.movie_goods_img img {
  width: 120px;
  height: 170px;
}
.movie_goods_cnt {
  margin-left: 135px;
}
.movie_star {
  margin-top: 20px;
  height: 10px;
  font-size: 12px;
}
.movie_goods_cnt p {
  margin-top: 10px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.introduction {
  padding: 20px 15px 20px;
  color: #333;
  font-size: 0.9375rem;
  line-height: 7.5vmin;
  background-color: #fff;
}
.introduction p:nth-child(2) {
  text-align: center;
  font-size: 20px;
}
.movie_actor {
  border-top: 1px solid #d9d9d9;
  padding: 20px 15px 25px;
}
.movie_actor h4 {
  font-weight: bold;
  margin-bottom: 20px;
}
.movie_actor .swiper-container {
  width: 100%;
}
.movie_actor .swiper-slide {
  text-align: center;
}
.swiper_img {
  height: 124px;
}
.still_photos {
  height: 100px;
}
.movie_actor .swiper-slide img {
  height: 100%;
  width: auto;
}
.movie_actor .swiper-slide p {
  font-size: 14px;
}
.movie_actor .swiper-slide span {
  font-size: 10px;
  color: #9c9c9c;
}
.star img {
  width: 70px;
}
.no-data {
	padding: 60px;
	font-size: 16px;
	color: #666;
	text-align: center;
}
</style>
